<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开发工具箱</title>
    <link rel="stylesheet" href="popup.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>🛠️ 开发工具箱</h1>
        </header>
        
        <nav class="tab-nav">
            <button class="tab-btn active" data-tab="password">密码工具</button>
            <button class="tab-btn" data-tab="cron">Cron表达式</button>
            <button class="tab-btn" data-tab="format">格式化</button>
            <button class="tab-btn" data-tab="encode">编码转换</button>
        </nav>

        <!-- 密码生成与MD5加密 -->
        <div class="tab-content active" id="password">
            <div class="section">
                <h3>密码生成</h3>
                <div class="form-group">
                    <label>密码长度：</label>
                    <input type="number" id="passwordLength" value="12" min="4" max="50">
                </div>
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="includeNumbers" checked> 数字
                    </label>
                    <label>
                        <input type="checkbox" id="includeLowercase" checked> 小写字母
                    </label>
                    <label>
                        <input type="checkbox" id="includeUppercase" checked> 大写字母
                    </label>
                    <label>
                        <input type="checkbox" id="includeSymbols"> 特殊字符
                    </label>
                </div>
                <button id="generatePassword" class="btn btn-primary">生成密码</button>
                <div class="result">
                    <input type="text" id="generatedPassword" readonly placeholder="生成的密码将显示在这里">
                    <button id="copyPassword" class="btn btn-copy">复制</button>
                </div>
            </div>

            <div class="section">
                <h3>MD5加密</h3>
                <div class="form-group">
                    <textarea id="md5Input" placeholder="请输入要加密的文本"></textarea>
                </div>
                <div class="form-group">
                    <label>
                        <input type="radio" name="md5Type" value="32" checked> 32位
                    </label>
                    <label>
                        <input type="radio" name="md5Type" value="16"> 16位
                    </label>
                    <label>
                        <input type="checkbox" id="md5Uppercase"> 大写
                    </label>
                </div>
                <button id="generateMD5" class="btn btn-primary">生成MD5</button>
                <div class="result">
                    <input type="text" id="md5Result" readonly placeholder="MD5加密结果将显示在这里">
                    <button id="copyMD5" class="btn btn-copy">复制</button>
                </div>
            </div>
        </div>

        <!-- Cron表达式生成 -->
        <div class="tab-content" id="cron">
            <div class="section">
                <h3>Cron表达式生成</h3>
                <div class="cron-builder">
                    <div class="form-group">
                        <label>秒：</label>
                        <select id="cronSecond">
                            <option value="0">0 (每分钟开始)</option>
                            <option value="*">* (每秒)</option>
                            <option value="*/5">*/5 (每5秒)</option>
                            <option value="*/10">*/10 (每10秒)</option>
                            <option value="*/15">*/15 (每15秒)</option>
                            <option value="*/30">*/30 (每30秒)</option>
                            <option value="custom">自定义</option>
                        </select>
                        <input type="text" id="cronSecondCustom" placeholder="输入自定义秒值" style="display: none; margin-top: 8px;">
                    </div>
                    <div class="form-group">
                        <label>分：</label>
                        <select id="cronMinute">
                            <option value="*" selected>* (每分钟)</option>
                            <option value="0">0 (每小时开始)</option>
                            <option value="*/5">*/5 (每5分钟)</option>
                            <option value="*/10">*/10 (每10分钟)</option>
                            <option value="*/15">*/15 (每15分钟)</option>
                            <option value="*/30">*/30 (每30分钟)</option>
                            <option value="30">30 (每小时30分)</option>
                            <option value="custom">自定义</option>
                        </select>
                        <input type="text" id="cronMinuteCustom" placeholder="输入自定义分值" style="display: none; margin-top: 8px;">
                    </div>
                    <div class="form-group">
                        <label>时：</label>
                        <select id="cronHour">
                            <option value="*" selected>* (每小时)</option>
                            <option value="0">0 (午夜)</option>
                            <option value="6">6 (早上6点)</option>
                            <option value="9">9 (早上9点)</option>
                            <option value="12">12 (中午12点)</option>
                            <option value="18">18 (下午6点)</option>
                            <option value="*/2">*/2 (每2小时)</option>
                            <option value="*/4">*/4 (每4小时)</option>
                            <option value="*/6">*/6 (每6小时)</option>
                            <option value="custom">自定义</option>
                        </select>
                        <input type="text" id="cronHourCustom" placeholder="输入自定义时值" style="display: none; margin-top: 8px;">
                    </div>
                    <div class="form-group">
                        <label>日：</label>
                        <select id="cronDay">
                            <option value="*" selected>* (每天)</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="15">15</option>
                            <option value="20">20</option>
                            <option value="25">25</option>
                            <option value="30">30</option>
                            <option value="31">31 (月末)</option>
                            <option value="*/5">*/5 (每5天)</option>
                            <option value="*/10">*/10 (每10天)</option>
                            <option value="1-15">1-15 (上半月)</option>
                            <option value="16-31">16-31 (下半月)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>月：</label>
                        <select id="cronMonth">
                            <option value="*" selected>* (每月)</option>
                            <option value="1">1 (一月)</option>
                            <option value="2">2 (二月)</option>
                            <option value="3">3 (三月)</option>
                            <option value="4">4 (四月)</option>
                            <option value="5">5 (五月)</option>
                            <option value="6">6 (六月)</option>
                            <option value="7">7 (七月)</option>
                            <option value="8">8 (八月)</option>
                            <option value="9">9 (九月)</option>
                            <option value="10">10 (十月)</option>
                            <option value="11">11 (十一月)</option>
                            <option value="12">12 (十二月)</option>
                            <option value="*/3">*/3 (每季度)</option>
                            <option value="*/6">*/6 (每半年)</option>
                            <option value="1-6">1-6 (上半年)</option>
                            <option value="7-12">7-12 (下半年)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>周：</label>
                        <select id="cronWeek">
                            <option value="?" selected>? (不指定)</option>
                            <option value="*">* (每天)</option>
                            <option value="1">1 (周日)</option>
                            <option value="2">2 (周一)</option>
                            <option value="3">3 (周二)</option>
                            <option value="4">4 (周三)</option>
                            <option value="5">5 (周四)</option>
                            <option value="6">6 (周五)</option>
                            <option value="7">7 (周六)</option>
                            <option value="1-5">1-5 (工作日)</option>
                            <option value="6,7">6,7 (周末)</option>
                        </select>
                    </div>
                </div>
                <button id="generateCron" class="btn btn-primary">生成表达式</button>
                <div class="result">
                    <input type="text" id="cronResult" readonly placeholder="Cron表达式将显示在这里">
                    <button id="copyCron" class="btn btn-copy">复制</button>
                    <button id="quickTestCron" class="btn btn-secondary">测试</button>
                </div>
                <div class="cron-test">
                    <h4>表达式测试</h4>
                    <div class="test-input-group">
                        <input type="text" id="cronTest" placeholder="输入Cron表达式进行测试">
                        <button id="testCron" class="btn btn-secondary">测试</button>
                    </div>
                    <div id="cronTestResult"></div>
                </div>
            </div>
        </div>

        <!-- 格式化工具 -->
        <div class="tab-content" id="format">
            <!-- 格式化工具子标签 -->
            <div class="format-tabs">
                <button class="format-tab-btn active" data-target="json-format">JSON格式化</button>
                <button class="format-tab-btn" data-target="xml-format">XML格式化</button>
            </div>

            <!-- JSON格式化标签页 -->
            <div class="format-tab-content active" id="json-format">
                <div class="section">
                    <textarea id="jsonInput" rows="10" placeholder="请输入JSON字符串"></textarea>
                    <div class="btn-group">
                        <button id="formatJSON" class="btn btn-primary">格式化</button>
                        <button id="compressJSON" class="btn btn-secondary">压缩</button>
                        <button id="validateJSON" class="btn btn-secondary">验证</button>
                    </div>
                    <textarea id="jsonOutput" rows="10" readonly placeholder="格式化结果将显示在这里"></textarea>
                    <button id="copyJSON" class="btn btn-copy">复制结果</button>
                </div>
            </div>

            <!-- XML格式化标签页 -->
            <div class="format-tab-content" id="xml-format">
                <div class="section">
                    <textarea id="xmlInput" rows="10" placeholder="请输入XML字符串"></textarea>
                    <div class="btn-group">
                        <button id="formatXML" class="btn btn-primary">格式化</button>
                        <button id="compressXML" class="btn btn-secondary">压缩</button>
                    </div>
                    <textarea id="xmlOutput" rows="10" readonly placeholder="格式化结果将显示在这里"></textarea>
                    <button id="copyXML" class="btn btn-copy">复制结果</button>
                </div>
            </div>
        </div>

        <!-- 编码转换 -->
        <div class="tab-content" id="encode">
            <div class="section">
                <h3>URL编码转换</h3>
                <textarea id="urlInput" placeholder="请输入要编码/解码的URL"></textarea>
                <div class="btn-group">
                    <button id="encodeURL" class="btn btn-primary">编码</button>
                    <button id="decodeURL" class="btn btn-secondary">解码</button>
                </div>
                <textarea id="urlOutput" readonly placeholder="转换结果将显示在这里"></textarea>
                <button id="copyURL" class="btn btn-copy">复制结果</button>
            </div>

            <div class="section">
                <h3>Base64编码转换</h3>
                <textarea id="base64Input" placeholder="请输入要编码/解码的文本"></textarea>
                <div class="btn-group">
                    <button id="encodeBase64" class="btn btn-primary">编码</button>
                    <button id="decodeBase64" class="btn btn-secondary">解码</button>
                </div>
                <textarea id="base64Output" readonly placeholder="转换结果将显示在这里"></textarea>
                <button id="copyBase64" class="btn btn-copy">复制结果</button>
            </div>
        </div>
    </div>

    <script src="popup.js"></script>
</body>
</html>